গ্রিড আইটেম হল গ্রিড কন্টেইনারের চাইল্ড উপাদান, যা সরাসরি গ্রিড লেআউটের অংশ। গ্রিড আইটেমগুলোর অবস্থান, আকার, এবং স্টাইলিং নির্ধারণ করতে বিভিন্ন প্রোপার্টি ব্যবহার করা হয়। প্রতিটি গ্রিড আইটেম একটি নির্দিষ্ট গ্রিড লাইনে (Grid Line) বা এলাকায় (Grid Area) রাখা যায়।

গ্রিড আইটেমের প্রোপার্টি

grid-column

গ্রিড আইটেম কোন কলাম থেকে শুরু হবে এবং কতটা কলাম জুড়ে থাকবে তা নির্ধারণ করতে ব্যবহৃত হয়।

.item {
  grid-column: 1 / 3; /* প্রথম থেকে তৃতীয় কলাম পর্যন্ত থাকবে */
}

ভ্যালুসমূহ

• grid-column-start: কোন কলাম থেকে শুরু হবে।
• grid-column-end: কোন কলামে শেষ হবে।

.item {
  grid-column-start: 2;
  grid-column-end: 4;
}

grid-row

গ্রিড আইটেম কোন সারি থেকে শুরু হবে এবং কতটা সারি জুড়ে থাকবে তা নির্ধারণ করতে ব্যবহৃত হয়।

.item {
  grid-row: 1 / 3; /* প্রথম থেকে তৃতীয় সারি পর্যন্ত থাকবে */
}

ভ্যালুসমূহ

• grid-row-start: কোন সারি থেকে শুরু হবে।
• grid-row-end: কোন সারিতে শেষ হবে।

.item {
  grid-row-start: 2;
  grid-row-end: 4;
}

grid-area

গ্রিড আইটেমের অবস্থান একসাথে নির্ধারণ করতে grid-area ব্যবহার করা হয়। এটি grid-row এবং grid-column এর সমন্বিত সংস্করণ।

.item {
  grid-area: 1 / 2 / 3 / 4; /* row-start / column-start / row-end / column-end */
}

justify-self

একটি গ্রিড আইটেমের অনুভূমিক অ্যালাইনমেন্ট নির্ধারণ করে।

ভ্যালুসমূহ:

• start: আইটেমটি বাম দিকে থাকবে।
• end: আইটেমটি ডান দিকে থাকবে।
• center: আইটেমটি কেন্দ্রে থাকবে।
• stretch: পুরো স্পেস দখল করবে (ডিফল্ট)।

.item {
  justify-self: center;
}

align-self

একটি গ্রিড আইটেমের উল্লম্ব অ্যালাইনমেন্ট নির্ধারণ করে।

ভ্যালুসমূহ:

• start: আইটেমটি উপরে থাকবে।
• end: আইটেমটি নিচে থাকবে।
• center: আইটেমটি উল্লম্বভাবে কেন্দ্রে থাকবে।
• stretch: পুরো স্পেস দখল করবে (ডিফল্ট)।

.item {
  align-self: end;
}

উদাহরণ: গ্রিড আইটেম স্টাইলিং

<div class="grid-container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
  <div class="item item4">Item 4</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
  }

  .item1 {
    grid-column: 1 / 3; /* প্রথম থেকে দ্বিতীয় কলাম পর্যন্ত */
    grid-row: 1 / 2;    /* প্রথম সারি */
  }

  .item2 {
    grid-column: 3 / 4; /* তৃতীয় কলাম */
    grid-row: 1 / 3;    /* প্রথম থেকে দ্বিতীয় সারি পর্যন্ত */
  }

  .item3 {
    grid-column: 1 / 2; /* প্রথম কলাম */
    grid-row: 2 / 3;    /* দ্বিতীয় সারি */
  }

  .item4 {
    justify-self: center; /* অনুভূমিক কেন্দ্রে */
    align-self: center;   /* উল্লম্ব কেন্দ্রে */
  }
</style>

উপরের উদাহরণে:

• Item 1 দুইটি কলাম এবং একটি সারি জুড়ে রয়েছে।
• Item 2 একটি কলাম এবং দুইটি সারি জুড়ে রয়েছে।
• Item 4 অনুভূমিক এবং উল্লম্বভাবে কেন্দ্রীভূত।

কেন গ্রিড আইটেমের নিয়ন্ত্রণ প্রয়োজন?

1. ডিজাইন নমনীয়তা: একক উপাদান কাস্টম পজিশনিং সম্ভব।
2. রেস্পন্সিভ লেআউট: বিভিন্ন ডিভাইসে ভিন্নভাবে আইটেম সাজানো যায়।
3. কোড সংক্ষিপ্ত: একাধিক প্রোপার্টির পরিবর্তে সহজ নিয়ন্ত্রণ।